﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>H3 BPM</title>
    <link rel="stylesheet" href="welcome.css" />
    <script src="../../WFRes/_Scripts/jquery/jquery.js?v=1.12.4"></script>
    <script src="../../WFRes/_Scripts/jquery/jquery.lang.js" type="text/javascript"></script>
    <script src="../../WFRes/_Scripts/vue/vue.min.js" type="text/javascript"></script>
    <script src="Welcome.js"></script>
    <script type="text/javascript">
        var pageInfo = {
            controls: {
                divBody: ".body",
                divSheet: "#divSheet",
                divWorkflow: "#divWorkflow",
                divQuery: "#divQuery",
                divBPA: "#divBPA",
                divWorkItem: "#divWorkItem",
                divExtend: "#divExtend",
                divApp: "#divApp"
            }
        }

        $(function () {
            $.each(pageInfo.controls, function (k, v) {
                pageInfo.controls[k] = $(v);
            });
            $(".activityFoot").hide();
            // 注册退格事件，回到主页
            $("body").keydown(function (e) {
                if (e.keyCode == 8) {
                    window.location.href = "Home.html";
                    e.preventDefault();
                }
            });
            var a, b, c;

            // 线条连接业务表单到应用系统
            a = getSidePoint(pageInfo.controls.divSheet, "right");
            c = getSidePoint(pageInfo.controls.divApp, "left");
            b = { x: a.x + (c.x - a.x) / 2, y: c.y };
            $("<div></div>")
               .addClass("poly-line")
               .addClass("line-top-right")
               .css("width", b.x - a.x)
               .css("height", b.y - a.y)
               .css("top", a.y)
               .css("left", a.x)
               .appendTo(pageInfo.controls.divBody);
            //$("<div></div>")
            //   .addClass("poly-line")
            //   .addClass("line-right")
            //   .css("width", b.x - a.x)
            //   .css("height", b.y - a.y)
            //   .css("top", b.y)
            //   .css("left", b.x)
            //   .appendTo(pageInfo.controls.divBody);

            // 线条连接业务查询到应用中心
            a = getSidePoint(pageInfo.controls.divQuery, "right");
            c = getSidePoint(pageInfo.controls.divApp, "left");
            b = { x: a.x + (c.x - a.x) / 2, y: c.y };

            $("<div></div>")
              .addClass("poly-line")
              .addClass("line-bottom-right")
              .css("width", b.x - a.x)
              .css("height", a.y - b.y)
              .css("top", b.y)
              .css("left", a.x)
              .appendTo(pageInfo.controls.divBody);

            // 线条连接报表分析到应用中心
            a = getSidePoint(pageInfo.controls.divBPA, "left");
            c = getSidePoint(pageInfo.controls.divApp, "right");
            b = { x: c.x + (a.x - c.x) / 2, y: c.y };

            $("<div></div>")
             .addClass("poly-line")
             .addClass("line-top-left")
             .css("width", a.x - b.x)
             .css("height", b.y - a.y)
             .css("top", a.y)
             .css("left", b.x)
             .appendTo(pageInfo.controls.divBody);

            //$("<div></div>")
            //.addClass("poly-line")
            //.addClass("line-left")
            //.css("width", b.x - c.x)
            //.css("height", 1)
            //.css("top", c.y)
            //.css("left", c.x)
            //.appendTo(pageInfo.controls.divBody);


            // 线条连接业务流程到应用中心
            a = getSidePoint(pageInfo.controls.divWorkflow, "right");
            c = getSidePoint(pageInfo.controls.divApp, "left");
            $("<div></div>")
               .addClass("poly-line")
               .addClass("pointLine-right")
               .css("width", c.x - a.x)
               .css("height", 1)
               .css("top", a.y)
               .css("left", a.x)
               .appendTo(pageInfo.controls.divBody);

            // 线条连接自定义待办到应用中心
            a = getSidePoint(pageInfo.controls.divWorkItem, "left");
            c = getSidePoint(pageInfo.controls.divApp, "right");

            $("<div></div>")
               .addClass("poly-line")
               .addClass("pointLine-left")
               .css("width", a.x - c.x)
               .css("height", 1)
               .css("top", c.y)
               .css("left", c.x)
               .appendTo(pageInfo.controls.divBody);


            // 线条连接自定义功能到应用中心
            a = getSidePoint(pageInfo.controls.divExtend, "left");
            c = getSidePoint(pageInfo.controls.divApp, "right");
            b = { x: a.x + (c.x - a.x) / 2, y: c.y };


            $("<div></div>")
             .addClass("poly-line")
             .addClass("line-bottom-left")
             .css("width", a.x - b.x)
             .css("height", a.y - b.y)
             .css("top", b.y)
             .css("left", b.x)
             .appendTo(pageInfo.controls.divBody);
        });

        var getSidePoint = function (obj, side) {
            if (side == "top") {
                return {
                    x: obj.position().left + obj.width() / 2,
                    y: obj.position().top
                };
            }
            else if (side == "left") {
                return {
                    x: obj.position().left,
                    y: obj.position().top + obj.height() / 2
                };
            }
            else if (side == "right") {
                return {
                    x: obj.position().left + obj.width(),
                    y: obj.position().top + obj.height() / 2
                };
            }
            else {
                return {
                    x: obj.position().left + obj.width() / 2,
                    y: obj.position().top + obj.height()
                };
            }
        }
    </script>
    <style type="text/css">
        /*兼容小屏幕样式 屏幕宽度小于1024时*/
        @media screen and (max-width:1280px) {
            .body {
                width: 90%;
                left: 46px;
            }
        }

        @media screen and (max-width:1024px) {
            .body {
                width: 100%;
                left: -66px;
            }
        }
    </style>
</head>
<body id="content">
    <div class="head">
        <div>
            <div class="title">
                {{Welcome.Wel_AppsActivity}}
            </div>
            <hr class="line" />
            <div class="description">
                &nbsp;&nbsp;&nbsp;&nbsp;<!--H3 BPM应用中心通过菜单组合流程模型中的表单和流程、报表模型中的报表、数据模型中的查询列表、系统内置的自定义任务和流程功能以及自定义功能，实现业务应用模块的定义。-->
                {{Welcome.Wel_AppsActivity_Des}}
            </div>
        </div>
    </div>
    <div class="body">
        <div id="divSheet" class="activity" style="top: 20px; left: 80px">
            <div class="activityHead">
                <div>
                    {{Welcome.Wel_BusinessForm}}
                </div>
            </div>
            <div class="activityBody">
                <div>
                    {{Welcome.Wel_BusinessFormDes}}
                </div>
            </div>
            <div class="activityFoot">
                <div>
                    点击进入>>
                </div>
            </div>
        </div>
        <div id="divWorkflow" class="activity" style="top: 180px; left: 80px">
            <div class="activityHead">
                <div>
                    {{Welcome.Wel_BusinessProcess}}
                </div>
            </div>
            <div class="activityBody">
                <div>
                    {{Welcome.Wel_BusinessProcessDes}}
                </div>
            </div>
            <div class="activityFoot">
                <div>
                    点击进入>>
                </div>
            </div>
        </div>
        <div id="divQuery" class="activity" style="top: 340px; left: 80px">
            <div class="activityHead">
                <div>
                    {{Welcome.Wel_DataQuery}}
                </div>
            </div>
            <div class="activityBody">
                <div>
                    {{Welcome.Wel_DataQueryDes}}
                </div>
            </div>
            <div class="activityFoot">
                <div>
                    点击进入>>
                </div>
            </div>
        </div>
        <div id="divBPA" class="activity" style="top: 20px; left: 660px">
            <div class="activityHead">
                <div>
                    {{Welcome.Wel_ReportAnalysis}}
                </div>
            </div>
            <div class="activityBody">
                <div>
                    {{Welcome.Wel_ReportAnalysisDes}}
                </div>
            </div>
            <div class="activityFoot">
                <div>
                    点击进入>>
                </div>
            </div>
        </div>
        <div id="divWorkItem" class="activity" style="top: 180px; left: 660px;">
            <div class="activityHead">
                <div>
                    {{Welcome.Wel_CustomToDo}}
                </div>
            </div>
            <div class="activityBody">
                <div>
                    {{Welcome.Wel_CustomToDoDes}}
                </div>
            </div>
            <div class="activityFoot">
                <div>
                    点击进入>>
                </div>
            </div>
        </div>
        <div id="divExtend" class="activity" style="top: 340px; left: 660px;">
            <div class="activityHead">
                <div>
                    {{Welcome.Wel_CustomFunction}}
                </div>
            </div>
            <div class="activityBody">
                <div>
                    {{Welcome.Wel_CustomFunctionDes}}
                </div>
            </div>
            <div class="activityFoot">
                <div>
                    点击进入>>
                </div>
            </div>
        </div>
        <div id="divApp" class="activity" style="top: 180px; left: 360px;">
            <div class="activityHead">
                <div>
                    {{Welcome.Wel_OperatingSystem}}
                </div>
            </div>
            <div class="activityBody">
                <div>
                    {{Welcome.Wel_OperatingSystemDes}}
                </div>
            </div>
            <div class="activityFoot">
                <div>
                    点击进入>>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
